import { useEffect, useState } from 'react'
import { Image, Ellipsis, NavBar, Skeleton } from 'antd-mobile'
import styles from "./index.module.less"
import HeaderNav from "@/components/header-nav"
import FooterNav from "@/components/footer-nav"
import { useSearchParams, useParams } from 'react-router-dom'
import { DeleteOutline, EditSOutline, EyeOutline } from 'antd-mobile-icons'
import { param } from 'jquery'
const { getArtcleDetails } = $globalServicer('world')
const ItemCrad = (props) => {
  const customNavigate = $globalNavigate()
  const [params] = useSearchParams();
  const [loading, setLoading] = useState(true)
  console.log("🚀 ~ ItemCrad ~ params:", params)
  const id = params.get('id');
  console.log(`------id`, id)
  const back = () => { }
  const [worldInfo, setWorldInfo] = useState(null)
  useEffect(() => {
    getArtcleDetails(id).then(res => {
      console.log(`------res`, res)
      setWorldInfo(res)
    });
  }, [])
  return (
    <>
      <div className={styles.detail_warp}>
        <div className={styles.headerTop}
          style={{ backgroundImage: `url(${worldInfo?.cover})`, backgroundSize: 'cover' }}
        >
          <div className="header">
            <HeaderNav backArrow={true}></HeaderNav>
          </div>
          <div className={styles.topImg}>
          </div>
        </div>
        <div className={styles.descWrapper}>
          <div className={styles.name}>
            {worldInfo?.title}
          </div>
          <div className={styles.desc}>
            {
              worldInfo?.summary
            }
          </div>
          <div className={styles.desc} dangerouslySetInnerHTML={{ __html: worldInfo?.body }}>
          </div>
        </div>
      </div>
      <div className="footer">
        <FooterNav></FooterNav>
      </div>
    </>
  );
};

export default ItemCrad;
